{% extends "base.html" %}

{% block title %}User Management - Volunteer Platform{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="sidebar">
        <nav class="dashboard-nav">
            <ul>
                <li><a href="{{ url_for('admin_dashboard') }}">Dashboard</a></li>
                <li class="active"><a href="{{ url_for('admin_users') }}">User Management</a></li>
                <li><a href="{{ url_for('admin_activities') }}">Activity Approval</a></li>
            </ul>
        </nav>
    </div>

    <div class="main-content">
        <h1>User Management</h1>
        
        <div class="filters">
            <form method="GET" action="{{ url_for('admin_users') }}" class="filter-form">
                <select name="role" onchange="this.form.submit()">
                    <option value="">All Roles</option>
                    <option value="volunteer" {% if request.args.get('role') == 'volunteer' %}selected{% endif %}>Volunteer</option>
                    <option value="organization" {% if request.args.get('role') == 'organization' %}selected{% endif %}>Charity Organization</option>
                </select>
                <select name="status" onchange="this.form.submit()">
                    <option value="">All Status</option>
                    <option value="pending" {% if request.args.get('status') == 'pending' %}selected{% endif %}>Pending</option>
                    <option value="active" {% if request.args.get('status') == 'active' %}selected{% endif %}>Active</option>
                    <option value="suspended" {% if request.args.get('status') == 'suspended' %}selected{% endif %}>Suspended</option>
                </select>
            </form>
        </div>

        <table class="data-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Status</th>
                    <th>Registration Time</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td>{{ user.id }}</td>
                    <td>{{ user.name }}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.role }}</td>
                    <td>{{ user.status }}</td>
                    <td>{{ user.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>
                        {% if user.status == 'pending' %}
                        <form method="POST" action="{{ url_for('admin_approve_user', user_id=user.id) }}" style="display: inline;">
                            <button type="submit" class="btn btn-success">Approve</button>
                        </form>
                        {% endif %}
                        {% if user.status == 'active' %}
                        <form method="POST" action="{{ url_for('admin_suspend_user', user_id=user.id) }}" style="display: inline;">
                            <button type="submit" class="btn btn-warning">Suspend</button>
                        </form>
                        {% endif %}
                        {% if user.status == 'suspended' %}
                        <form method="POST" action="{{ url_for('admin_activate_user', user_id=user.id) }}" style="display: inline;">
                            <button type="submit" class="btn btn-success">Activate</button>
                        </form>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>

        <div class="pagination">
            {% if page > 1 %}
            <a href="{{ url_for('admin_users', page=page-1, role=request.args.get('role'), status=request.args.get('status')) }}" class="btn">Previous</a>
            {% endif %}
            <span class="current-page">Page {{ page }}</span>
            {% if has_next %}
            <a href="{{ url_for('admin_users', page=page+1, role=request.args.get('role'), status=request.args.get('status')) }}" class="btn">Next</a>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %} 